<template>
    <div class="container">
        <el-form
            ref="input_data"
            :model="input_data"
            :rules="rules"
            class="form"
        >
            <el-form-item>
                <h1>REGISTER</h1>
            </el-form-item>
            <el-form-item prop="account">
                <el-input v-model="input_data.account" placeholder="请输入帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="input_data.password" auto-complete="off" placeholder="请输入密码" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item prop="check_password">
                <el-input v-model="input_data.check_password" auto-complete="off" placeholder="请再次输入密码" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="input_data.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="user_email">
                <el-input v-model="input_data.user_email" placeholder="请输入邮箱" type="email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register('input_data')">注册</el-button>
                <el-button @click="resetForm('input_data')">重置</el-button>
                <el-button @click="()=>{this.$router.push('/login')}">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import * as rulesUtil from '@/elementFormRules/index';

export default {
    name: 'register',
    data() {
        var checkPasswordAgain = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else {
                if (value !== this.input_data.password) {
                    callback(new Error('两次密码不一致'));
                }
                callback();
            }
        };
        var checkAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
                /*                post(api.check, { username: value })
                                    .then(res => {
                                        // console.log(res.data);
                                        if (!res.data.success) {
                                            callback(new Error('帐号已被使用'));
                                        } else {
                                            callback();
                                        }
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    });*/
            }
        };
        return {
            input_data: {
                //账号
                account: '',
                password: '',
                check_password: '',
                name: '',
                user_email: ''
            },
            rules: {
                account: [{ validator: checkAccount, trigger: 'blur' }],
                password: [{ validator: rulesUtil.checkPassword, trigger: 'blur' }],
                check_password: [{ validator: checkPasswordAgain, trigger: 'blur' }],
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                user_email: [{ validator: rulesUtil.checkEmail, trigger: 'blur' }]
            }
        };
    },
    methods: {
        //注册函数
        register(formData) {
            this.$refs[formData].validate(valid => {
                if (valid) {
                    //消息提示登录成功
                    this.$message({ message: '注册成功', type: 'success' });
                    /*                    post(api.register,
                                            {
                                                username: this.input_data.account,
                                                password: md5(this.input_data.password),
                                                name: this.input_data.name,
                                                email: this.input_data.user_email
                                            })
                                            .then(res => {
                                                console.log(res);
                                                if (res.data.success) {
                                                    //消息提示登录成功
                                                    this.$message({ message: '注册成功', type: 'success' });
                                                } else {
                                                    this.$message.error('注册失败');
                                                }
                                            })
                                            .catch(err => {
                                                console.log(err);
                                            });*/

                } else {
                    return false;
                }
            });
        },
        //重置输入框
        resetForm(formData) {
            this.$refs[formData].resetFields();
        }
    }
};
</script>
<style lang="less" scoped src="../assets/less/register.less">
</style>
